<script setup lang="ts">
import type { StyleValue } from 'vue'
import { ref } from 'vue'
import { useSlots } from 'vue'
import { computed } from 'vue'

type ShadowEnum = 'always' | 'hover' | 'never'

const props = withDefaults(
  defineProps<{
    header?: string
    bodyStyle?: StyleValue
    shadow?: ShadowEnum
  }>(),
  {
    shadow: 'always'
  }
)

const slots = useSlots()

const hasHeader = computed(() => {
  return props.header !== undefined || slots.header !== undefined
})

const divRef = ref<HTMLDivElement>()

const onMouseEnter = () => {
  if (props.shadow === 'hover') {
    divRef.value?.classList.add('shadow')
  }
}

const onMouseLeave = () => {
  if (props.shadow === 'hover') {
    divRef.value?.classList.remove('shadow')
  }
}
</script>

<template>
  <div
    ref="divRef"
    class="itcast-card"
    :class="{ shadow: shadow === 'always' }"
    @mouseenter="onMouseEnter"
    @mouseleave="onMouseLeave"
  >
    <div class="header" v-if="hasHeader">
      <!-- 头部插槽 -->
      <slot name="header">{{ header }}</slot>
    </div>
    <div class="body" :style="bodyStyle">
      <!-- 默认插槽 -->
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.itcast-card {
  border-radius: 5px;
  &.shadow {
    box-shadow: 0 0 5px 5px pink;
  }
  .header {
    padding: 10px;
    border-bottom: solid 1px hotpink;
  }
  .body {
    padding: 10px;
  }
}
</style>
